<template>
  <div
    style="height: 100%; width: 100%; overflow: hidden; box-sizing: border-box"
  >
    <vue-mobile-table :dataSource="tableData" :requestData="requestData">
      <table-column
        prop="index"
        :fixed="true"
        label="序号"
        sortable
      ></table-column>
      <table-column
        prop="name"
        label="名称"
        min-width="120"
        align="right"
      ></table-column>
      <table-column prop="text" label="文本" min-width="120"></table-column>
      <table-column prop="age" label="年龄" min-width="120"></table-column>
    </vue-mobile-table>
  </div>
</template>

<script>
export default {
  name: "testPage",
  data() {
    return {
      tableData: [],
    };
  },
  methods: {
    requestData(isFresh) {
      // alert(12)
      return new Promise((reslove) => {
        if (isFresh) {
          setTimeout(() => {
            reslove(true);
          }, 2000);
        } else {
          setTimeout(() => {
            for (let index = 0; index < 100; index++) {
              this.tableData.push({
                index: index,
                age: index,
                text: "我是一段文字，我很长，不要换行",
                name: "姓名" + index + "号",
              });
            }
            reslove(true);
          }, 2000);
        }
      });
    },
  },
  created() {
    let data = [];
    for (let index = 0; index < 100; index++) {
      data.push({
        index: index,
        age: index,
        text: "我是一段文字，我很长，不要换行",
        name: "姓名" + index + "号",
      });
    }
    this.tableData = data;
    // console.log(this.tableData);
  },
};
</script>

<style></style>
